<!--
 * @Author: 杨文涓 943701297@qq.com
 * @Date: 2022-05-16 22:12:01
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-07-19 14:13:53
 * @FilePath: \JSc:\Users\94370\Desktop\面向工作学习\html css\8-CSS 六（第七天）\土豆网.html
 * @Description: 练习元素的显示与隐藏、定位
 * 
 * Copyright (c) 2022 by 杨文涓 943701297@qq.com, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>土豆网鼠标经过显示遮罩</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .container {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 100px auto;
      }

      .container img {
        width: 100%;
        height: 100%;
      }

      .container::before {
        content: "";
        /* 隐藏遮罩层 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4) url(./arr.png) no-repeat center;
      }

      /* 当鼠标经过container容器，就让里面的遮罩层显示出来 */
      .container:hover::before {
        display: block;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <!-- <div class="cover"></div> -->
      <img src="./tudou.jpg" />
    </div>
  </body>
</html>
